<template>
	<view class="page-view">
		<view class="content-wrap">
			<u--form ref="uForm" :model="form" :rules="rules" labelWidth="130" labelPosition="left">
				<u-form-item label="区域" @click="selectArea" prop="areaName" required borderBottom customStyle="height:80rpx;">
					<u--input v-model="form.areaName" disabled border="none" placeholder="请选择区域" disabledColor="#fff">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item
					label="分类"
					@click="
						townTypeShow = true;
						hideKeyboard();
					"
					prop="type"
					required
					borderBottom
					customStyle="height:80rpx;"
				>
					<u--input
						:value="form.type | formatType"
						disabled
						border="none"
						placeholder="请选择类型"
						disabledColor="#fff"
					>
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="名称" prop="name" required borderBottom customStyle="height:80rpx;">
					<u--input v-model="form.name" border="none" placeholder="请输入名称"></u--input>
				</u-form-item>
				<u-form-item label="井编号" prop="wellNo" required borderBottom customStyle="height:80rpx;">
					<u--input v-model="form.wellNo" border="none" placeholder="请输入井编号"></u--input>
				</u-form-item>
				<u-form-item label="水质性状" prop="water" required borderBottom customStyle="height:80rpx;">
					<u-radio-group v-model="form.water" placement="row">
						<u-radio :name="1" label="污水" :customStyle="{ marginRight: '56rpx' }"></u-radio>
						<u-radio :name="2" label="雨水" :customStyle="{ marginRight: '56rpx' }"></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="形制" prop="shape" required borderBottom customStyle="height:80rpx;">
					<u-radio-group v-model="form.shape" placement="row">
						<u-radio :name="1" label="圆井" :customStyle="{ marginRight: '56rpx' }"></u-radio>
						<u-radio :name="2" label="方井" :customStyle="{ marginRight: '56rpx' }"></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item
					label="井盖材质"
					@click="
						wellMaterialShow = true;
						hideKeyboard();
					"
					prop="material"
					required
					borderBottom
					customStyle="height:80rpx;"
				>
					<u--input
						:value="form.material | formatWellMaterial"
						disabled
						border="none"
						placeholder="请选择井盖材质"
						disabledColor="#fff"
					>
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="高程" prop="height" required borderBottom customStyle="height:80rpx;">
					<u--input v-model="form.height" border="none" placeholder="请输入高程"></u--input>
				</u-form-item>
				<u-form-item label="井深" prop="depth" required borderBottom customStyle="height:80rpx;">
					<u--input v-model="form.depth" border="none" placeholder="请输入井深"></u--input>
				</u-form-item>
				<u-form-item label="井内照片" prop="haveQuestion" required customStyle="height:80rpx;">
					<u-radio-group v-model="form.haveQuestion" placement="row">
						<u-radio :name="1" label="有问题" :customStyle="{ marginRight: '56rpx' }"></u-radio>
						<u-radio :name="0" label="无问题" :customStyle="{ marginRight: '56rpx' }"></u-radio>
					</u-radio-group>
				</u-form-item>
				<div class="upload-wrap">
					<uploadImg v-model="form.picList" />
				</div>
				<u-form-item customStyle="height:80rpx;">
					<u--input v-model="form.description" border="none" placeholder="请输入井内描述（非必填）"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="page-btn-wrap">
			<view class="btn-item">
				<u-button type="primary" text="提交" customStyle="margin: auto 0" @click="submit"></u-button>
			</view>
		</view>
		<u-picker
			v-if="townTypeShow"
			:show="townTypeShow"
			title="分类"
			keyName="label"
			:columns="[townTypeList]"
			@confirm="handleTownType"
			@cancel="townTypeShow = false"
		></u-picker>
		<u-picker
			v-if="wellMaterialShow"
			:show="wellMaterialShow"
			title="井盖材质"
			keyName="label"
			:columns="[wellMaterialList]"
			@confirm="handleWellMaterial"
			@cancel="wellMaterialShow = false"
		></u-picker>
	</view>
</template>
<script>
import uploadImg from '@/components/upload-img/upload-img.vue';
import { townTypeList, wellMaterialList } from '@/config/enumeration.js';
import { wellCheckAdd } from '@/api/management.js';
export default {
	name: 'WellCheckForm',
	components: {
		uploadImg,
	},
	filters: {
		formatType(type) {
			const val = (townTypeList.find((x) => x.value === type) || {}).label;
			return val;
		},
		formatWellMaterial(WellMaterial) {
			const val = (wellMaterialList.find((x) => x.value === WellMaterial) || {}).label;
			return val;
		},
	},
	data() {
		return {
			form: {
				areaId: '', // * 区域-镇id
				areaId1: '', // * 区域-区id
				type: '', // * 分类 1-生活小区，2-工业园区，3-其他类
				name: '', // * 名称
				wellNo: '', // * 井编号
				water: '', // * 水质性状
				shape: '', // * 形制
				material: '', // * 井盖材质
				height: '', // * 高程
				depth: '', // * 井深
				haveQuestion: '', // * 井内照片有无问题
				imageUrl: '', // 井内照片
				description: '', //描述
				areaName: '', // 区域名称显示
				picList: [], // 问题照片列表
			},
			rules: {
				areaName: [
					{
						required: true,
						message: '必填，请选择',
						trigger: ['change'],
					},
				],
				type: [
					{
						type: 'number',
						required: true,
						message: '必填，请选择',
						trigger: ['change'],
					},
				],
				name: [
					{
						required: true,
						message: '必填，请输入',
						trigger: ['blur'],
					},
				],
				wellNo: [
					{
						required: true,
						message: '必填，请输入',
						trigger: ['blur'],
					},
				],
				water: [
					{
						type: 'number',
						required: true,
						message: '必填，请选择',
						trigger: ['change'],
					},
				],
				shape: [
					{
						type: 'number',
						required: true,
						message: '必填，请选择',
						trigger: ['change'],
					},
				],
				material: [
					{
						type: 'number',
						required: true,
						message: '必填，请选择',
						trigger: ['change'],
					},
				],
				height: [
					{
						required: true,
						message: '必填，请输入',
						trigger: ['blur'],
					},
				],
				depth: [
					{
						required: true,
						message: '必填，请输入',
						trigger: ['blur'],
					},
				],
				haveQuestion: [
					{
						type: 'number',
						required: true,
						message: '必填，请选择',
						trigger: ['change'],
					},
				],
			},
			area: {},
			townTypeShow: false,
			townTypeList,
			wellMaterialShow: false,
			wellMaterialList,
		};
	},
	mounted() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		handleTownType(res) {
			this.form.type = res.value[0].value;
			this.townTypeShow = false;
			this.$nextTick(() => {
				this.$refs.uForm.validateField('type');
			});
		},
		handleWellMaterial(res) {
			this.form.material = res.value[0].value;
			this.wellMaterialShow = false;
			this.$nextTick(() => {
				this.$refs.uForm.validateField('material');
			});
		},
		selectArea() {
			uni.navigateTo({
				url: '/pages/selectPointArea/selectPointArea',
				events: {
					selectedArea: (data) => {
						// console.log('selectedArea', data);
						this.area.pointArea = data[0].id + '';
						this.area.label = data[0].title;
						this.form.areaId = data[0].id + '';
						this.form.areaId1 = data[1].id + '';
						this.form.areaName = data[1].title + '-' + data[0].title;
						this.$nextTick(() => {
							this.$refs.uForm.validateField('areaName');
						});
					},
				},
				success: (res) => {
					const selectStreet = {
						id: this.area.pointArea,
						title: this.area.label,
					};
					res.eventChannel.emit('selectArea', selectStreet);
				},
			});
		},
		submit() {
			this.$refs.uForm.validate().then(async (res) => {
				try {
						let imageUrl = '';
						const picList = this.form.picList;
					if(picList.length){
						imageUrl = picList[0].url;
					} else {
						uni.showToast({
							title: '请上传井内照片',
							icon: 'error',
						});
						return;
					}
					const param = { ...this.form , imageUrl};
					await wellCheckAdd(param);
					uni.showToast({
						title: '已提交',
						icon: 'success',
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			});
		},
		hideKeyboard() {
			uni.hideKeyboard();
		},
	},
};
</script>
<style scoped lang="scss">
.page-view {
	padding-bottom: 200rpx;
}

.page-btn-wrap {
	position: fixed;
	display: flex;
	bottom: 0;
	width: 100%;
	height: 166rpx;
	box-shadow: 0 -4rpx 24rpx 0 #00000014;
	background: white;
	z-index: 99;
}

.btn-item {
	padding: 16rpx 32rpx 0 32rpx;
	width: 100%;
	height: 100%;
}

.content-wrap {
	padding: 0rpx 24rpx 0 36rpx;
	margin: 24rpx 24rpx;
	background: #fff;
}
</style>
